<template>
  <div class="login">
    <!-- 登录表单项 
    el-form 
    model	表单数据对象	object
    rules	表单验证规则	object   Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
    -->
    <el-form
      :model="loginForm"
      :rules="rules"
      label-width="100px"
      class="loginForm"
      ref='login'
    >
      <el-form-item prop="username" label="用户名：">
        <el-input v-model="loginForm.username" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input
          v-model="loginForm.password"
          clearable
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {login} from '../util/request/api'
export default {
  data() {
    return {
      loginForm: {
        username: "admin2",
        password: "admin2",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //封装一个登录事件
    // login() {
    //   // this.$router.push("/index");
    //   //先做验证，验证没有问题就跳转到index页面
    //   this.$refs.login.validate(val=>{
    //     if(val){
    //       login(this.loginForm).then(res => {
    //         if(res.code === 200) {
    //           // 登录成功，保存用户数据，然后跳转
    //           this.$store.commit('saveUserInfo', res.list)
    //           this.$router.push('/index')
    //         }else {
    //           this.$message.error(res.msg)
    //         }
    //       })
    //     }else{
    //       console.log(val,'22222');
    //     }
    //   })
    // },
    // es7 语法的版本
    login() {
      //先做验证，验证没有问题就跳转到index页面
      this.$refs.login.validate(async val => {
        if(val) {
          // val是真，表示校验成功
          let res = await login(this.loginForm);
          if(res.code === 200) {
            // 登录成功，保存用户数据，然后跳转
            this.$store.commit('saveUserInfo', res.list)
            this.$router.push('/index')
          }else {
            console.log(val,'22222');
          }
        }
      })
    }
  },
};
</script>

<style scoped>
.login {
  background: #ccc;
  width: 100%;
  height: 100vh;
}
.loginForm {
  width: 380px;
  /* height: 250px; */
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -150px 0 0 -175px;
  background: #fff;
  padding: 30px 20px;
  border-radius: 20px;
}
</style>
